<template>
  <div class="hello">
    <s-radio-group v-model="group_value" :disabled="false">
      <s-radio
        v-for="(item,index) in radioList"
        :key="'radio'+index"
        :label="item.id"
      >{{item.value}}</s-radio>
    </s-radio-group>
    <s-radio-group v-model="group_btn_value" :disabled="false">
      <s-radio-button
        v-for="(item,index) in radioList"
        :key="'radio'+index"
        :label="item.id"
      >{{item.value}}</s-radio-button>
    </s-radio-group>
    <br />
    <br />
    <br />
    <s-input type="input" v-model="name" @input="inputInput"></s-input>
    <br />
    <s-input type="textarea" v-model="info" placeholder="请输入。。。"></s-input>
    <br />
    <s-button @click="submitBtn">
      <span slot>提交--</span>
    </s-button>
    <br />
    <button @click="test">子组件的按钮</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",

  props: {
    msg: String
  },
  data() {
    return {
      name: "name",
      info: "",
      group_value: 1,
      group_btn_value: 1,
      radioList: [
        {
          value: "第一种",
          id: 1
        },
        {
          value: "第二种",
          id: 2
        },
        {
          value: "第三种",
          id: 3
        },
        {
          value: "第四种",
          id: 4
        }
      ]
    };
  },
  watch: {
    group_value(val) {
      console.log("val---------!!!", val);
    }
  },
  methods: {
    test() {
      this.$emit("clickFun", "我给父组件传一个值");
      console.log("----", this.group_value);
    },
    submitBtn(evt) {
      console.log(evt);
    },
    inputInput(evt) {
      console.log("evt,-", evt);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello {
}
</style>
